import React from "react";
import {Image, View} from "@tarojs/components";
import {padImgURI} from "../../../../utils";
import StepBox from "../../../../components/view/StepBox";
import './index.scss';

export interface IFoodCateItem {
  Img: string;
  Name: string;
  Note: string;
  Describe: string;
  Id: string;
  num: number;
}

export enum EFoodOrderItemType {
  'readonly',
  'write'
}
export interface IFoodOrderItem {
  type?: EFoodOrderItemType.readonly | EFoodOrderItemType.write,
  item: IFoodCateItem;
  delItem?: Function; // 修改类型为Function
  editItem?: Function;
}


export const FoodOrderItem: React.FC<IFoodOrderItem> = ({type = EFoodOrderItemType.write, item, delItem, editItem}): JSX.Element => {
  return (
    <View className='SaveItem justify-between'>
      <View className='left align-center'>
        <Image className='img' lazyLoad src={padImgURI(item.Img)}></Image>
        <View className='info'>
          <View className='title'>{item.Name}</View>
          <View className='subTitle'>{item.Describe}</View>
        </View>
      </View>
      <View className='right'>
        <View className='note' style={{opacity: EFoodOrderItemType.write ? '0' : '1'}}>{item.Note}</View>
        {
          type ?
            <StepBox
              onMin={() => delItem(item.Id)}
              onMax={() => {
              }} // 添加onMax方法
              value={item.num}
              onChange={(value: number) => editItem({num: value, Id: item.Id})}
            ></StepBox>
            :
            <View className='num'>*{item.num}</View>
        }
      </View>
    </View>
  );
};


export const FoodCateItem: React.FC<{ item: IFoodCateItem }> = ({item}): JSX.Element => {
  return (
    <View className='list-item'>
      <Image lazyLoad className='prodImg' src={padImgURI(item.Img)}></Image>
      <View className='content'>
        <View className='title'>{item.Name}</View>
        <View className='justify-between'>
          <View className='subTitle'>{item.Describe}</View>
          <View className='note'>{item.Note}</View>
        </View>
      </View>
    </View>
  );
};
